<template>
	<view class="container">
		<view class="nr-box">

			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :labelStyle="{padding:'10rpx 20rpx'}" labelWidth="auto" :model="form"
				:rules="rules" ref="uForm">
				<u-form-item label="姓名" labelWidth="auto" prop="real_name" borderBottom ref="item1">
					<u--input v-model="form.real_name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="手机号" labelWidth="auto" prop="mobile" borderBottom ref="item1">
					<u--input v-model="form.mobile" border="none"></u--input>
				</u-form-item>
				<u-form-item label="意向车型" labelWidth="auto" prop="cart" borderBottom @click="cartShow = true"
					ref="item1">
					<u--input v-model="form.cart" disabledColor="#ffffff" placeholder="请选择意向车型" border="none"
						inputAlign="right" disabled></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="销售顾问" prop="staffName" borderBottom @click="staffShow = true" ref="item1">
					<u--input v-model="form.staffName" disabled disabledColor="#ffffff" placeholder="请选择销售顾问"
						border="none" inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="预约时间" prop="make_date" borderBottom ref="item1" @click="makeDateShow = true">
					<u--input v-model="form.make_date" disabled disabledColor="#ffffff" placeholder="请选择预约时间"
						border="none" inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="邀约分类" prop="arrival_title" borderBottom ref="item1" @click="arrivalShow = true">
					<u--input v-model="form.arrival_title" disabled disabledColor="#ffffff" placeholder="请选择邀约分类"
						border="none" inputAlign="right">></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="客户问题" prop="customer_case" borderBottom ref="item1" @click="caseShow=true">
					<u--input v-model="form.customer_case" disabled disabledColor="#ffffff" placeholder="请选择客户问题"
						border="none" inputAlign="right">></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="备注" prop="remark" borderBottom>
					<u--textarea v-model="form.remark" placeholder="请输入内容"></u--textarea>
				</u-form-item>
			</u--form>
			<view class="but">
				<u-button type="primary" @click="submit">提交</u-button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-picker :show="staffShow" @confirm="staffSelectOk" closeOnClickOverlay keyName="label" @close="staffclose"
			:columns="staffList" @cancel="staffSelectNot"></u-picker>
		<u-picker :show="cartShow" @confirm="cartSelectOk" closeOnClickOverlay keyName="label" @close="cartclose"
			:columns="cartList" @cancel="cartSelectNot"></u-picker>
		<u-picker :show="arrivalShow" @confirm="arrivalSelectOk" closeOnClickOverlay keyName="label"
			@close="arrivalclose" :columns="arrivalColumns" @cancel="arrivalSelectNot"></u-picker>
		<u-picker :show="caseShow" @confirm="caseSelectOk" closeOnClickOverlay keyName="label" @close="caseclose"
			:columns="caseColumns" @cancel="caseSelectNot"></u-picker>

		<u-calendar :show="makeDateShow" :closeOnClickOverlay="false" @close="makeDateShow = false"
			@confirm="confirmMake"></u-calendar>
		<!-- 
		<u-datetime-picker :show="makeDateShow" value-format="yyyy-MM-dd HH:mm:ss" v-model="valueDate2" mode="datetime"
			@confirm="confirmMake" @cancel="makeDateShow = false"></u-datetime-picker> -->
	</view>
</template>

<script>
	import {
		makeAdd
	} from "@/api/system/make"
	import {
		getLabel
	} from '@/api/system/index'

	export default {
		data() {
			return {
				form: {
					real_name: null,
					mobile: null,
					cart: null,
					staffName: null,
					activeId: null,
					cart_id: null,
					staff_id: null,
					arrival_title: null,
					arrival_status: null,
					make_date: null,
					arrival_id: null,
					customer_case: null,
					remark: null
				},
				staffList: [],
				staffShow: false,
				cartList: [],
				cartShow: false,
				makeDateShow: false,
				valueDate2: Number(new Date()),
				arrivalShow: false,
				caseShow: false,
				arrivalColumns: [
					[{
						label: '首邀',
						id: 1
					}, {
						label: '二邀',
						id: 2
					}],
				],
				caseColumns: [
					['价格问题', '车型问题', '首次了解', '其他问题']
				],
				rules: {
					// 'real_name': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写姓名',
					// 	trigger: ['blur', 'change']
					// },
					// 'mobile': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写手机号',
					// 	trigger: ['blur', 'change']
					// },
					// 'cart': {

					// 	required: true,
					// 	message: '请选择意向车型',
					// 	trigger: ['blur', 'change']
					// },
					// 'cart': {
					// 	required: true,
					// 	message: '请选择意向车型',
					// 	trigger: ['blur', 'change']
					// },
					// 'cart': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请选择意向车型',
					// 	trigger: ['blur', 'change']
					// },
					// 'staffName': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请选择销售顾问',
					// 	trigger: ['blur', 'change']
					// },
					// 'make_date': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请选择预约时间',
					// 	trigger: ['blur', 'change']
					// },
					// 'arrival_title': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请选择到店情况',
					// 	trigger: ['blur', 'change']
					// },
					// 'customer_case': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请选择客户问题',
					// 	trigger: ['blur', 'change']
					// },
				},
			}
		},
		onLoad() {



		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		created() {
			var stort_ac_id = uni.getStorageSync('active_id')
			this.form.activeId = stort_ac_id
			this.getLabelList()
		},
		methods: {
			async getLabelList() {
				var params = {
					activeId: this.form.activeId
				}
				await getLabel(params).then(res => {
					if (!res.code) {
						var staffList = res.data.staffList
						if (staffList) {
							var arr = Object.entries(staffList).map(([key, value]) => {

								return {
									id: key,
									label: value
								};
							});
							this.staffList = [arr];
						}
						var cartList = res.data.cartList
						if (cartList) {
							var arr = Object.entries(cartList).map(([key, value]) => {

								return {
									id: key,
									label: value
								};
							});
							this.cartList = [arr];
						}
					}

				});
			},
			async cartSelectOk(e) {
				var data = e.value[0]
				this.form.cart_id = data.id
				this.form.cart = data.label
				this.cartShow = false
			},
			cartclose() {
				this.cartShow = false
			},
			cartSelectNot() {
				this.cartShow = false
			},
			async staffSelectOk(e) {
				var data = e.value[0]
				this.form.staff_id = data.id
				this.form.staffName = data.label
				this.staffShow = false
			},
			staffclose() {
				this.staffShow = false
			},
			staffSelectNot() {
				this.staffShow = false
			},
			async arrivalSelectOk(e) {
				var data = e.value[0]
				this.form.arrival_status = data.id
				this.form.arrival_title = data.label
				this.arrivalShow = false
			},
			arrivalclose() {
				this.arrivalShow = false
			},
			arrivalSelectNot() {
				this.arrivalShow = false
			},
			async caseSelectOk(e) {
				var data = e.value[0]
				this.form.customer_case = data
				this.caseShow = false
			},
			caseclose() {
				this.caseShow = false
			},
			caseSelectNot() {
				this.caseShow = false
			},
			confirmMake(e) {
				// console.log(e[0])
				// var date = this.$moment(e.value).format("YYYY-MM-DD HH:mm:ss")
				this.form.make_date = e[0];
				this.makeDateShow = false
			},
			submit() {
				if (!this.form.real_name) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "姓名不能为空"
					})
					return
				}
				if (!this.form.mobile) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "手机号不能为空"
					})
					return
				}
				if (!this.form.cart_id) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "车型不能为空"
					})
					return
				}
				if (!this.form.staff_id) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "销售顾问不能为空"
					})
					return
				}
				if (!this.form.make_date) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "预约时间不能为空"
					})
					return
				}
				if (!this.form.arrival_status) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "邀约分类不能为空"
					})
					return
				}
				if (!this.form.customer_case) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "客户情况不能为空"
					})
					return
				}
				makeAdd(this.form).then((res) => {
					if (!res.code) {
						this.$refs.uToast.show({
							type: 'success',
							message: "添加成功"
						})

						uni.navigateBack({
							delta: 1
						});

					}

				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.nr-box {

		width: 90%;
		margin: 0 auto;
		padding: 30rpx 0rpx;


		.form-item {
			margin-bottom: 50px;
			color: red;
		}

		.but {
			margin-top: 100rpx;

		}
	}
</style>